﻿.activity-node {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

    .activity-node .node-content-container {
        position: relative;
    }

        .activity-node .node-content-container .node-content {
            position: relative;
        }

            .activity-node .node-content-container .node-content .node-outline-content {
                width: var(--wf-node-outline-width);
                height: var(--wf-node-outline-height);
                border: 1px solid var(--wf-node-border-color);
                border-radius: var(--wf-node-border-radius);
                background-color: var(--wf-node-border-color);
            }

        .activity-node .node-content-container ::deep .action {
            position: absolute;
            z-index: 1;
        }

        .activity-node .node-content-container .node-content ::deep .action {
            position: relative;
        }

        .activity-node .node-content-container ::deep .action.activity-validation-result-action {
            top: 3px;
            right: 3px;
        }

        .activity-node .node-content-container ::deep .action.activity-delete-action {
            left: calc(50% - 8px);
            top: -8px;
        }

        .activity-node .node-content-container ::deep .action.activity-cut-action {
            left: calc(50% + 12px);
            top: -8px;
        }

        .activity-node .node-content-container ::deep .action.activity-move-up-action {
            left: 4px;
            top: -18px;
        }

        .activity-node .node-content-container ::deep .action.activity-move-down-action {
            left: 4px;
            bottom: -18px;
        }

        .activity-node .node-content-container:hover ::deep .action.hidden-action {
            visibility: visible;
            transition: none;
        }

        .activity-node .node-content-container ::deep .action.hidden-action {
            visibility: hidden;
            transition-property: visibility;
            transition-delay: 0.2s;
        }

    .activity-node .node-line {
        position: relative;
        flex-grow: 1;
        min-height: var(--wf-node-line-length);
    }

        .activity-node .node-line .v-line {
            position: absolute;
            left: calc(50% - 1px);
            width: 2px;
            height: 100%;
            border-left: 2px solid var(--wf-node-line-color);
        }

        .activity-node .node-line ::deep .action {
            position: absolute;
            left: calc(50% - 8px);
            background-color: var(--wf-backcolor);
        }

            .activity-node .node-line ::deep .action.end-action {
                bottom: 4px;
            }

            .activity-node .node-line ::deep .action.collapse-branches-action {
                left: calc(50% - 5px);
                top: -5px;
            }

            .activity-node .node-line ::deep .action.add-activity-action {
                top: calc(var(--wf-node-line-length) / 2 - 8px);
            }

    .activity-node.in-branch.end-node .node-line .v-line {
        border-left-style: dashed;
    }
